<template>
	<view class="share-wrap">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				<view class="nav-title">分享链接</view>
				<view style="width: 36rpx; height: 36rpx;"></view>
			</view>
		</view>

		<view class="place"></view>

		<scroll-view scroll-y="true" class="scrollVue">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="address" auto :options="{ margin: 10 }"></uqrcode>
			<view class="share-box">
				<view class="invitation-code">
					<text>{{$t('我的邀请码')}}：{{ inviteCode }}</text>
					<image src="/static/imgs/copy-icon.png" mode="widthFix" @click="$util.copy(inviteCode)"></image>
				</view>
				<view class="btns">
					<u-button color="#D55B94" size="large" :text="$t('分享邀请海报')" @click="initCanvas"></u-button>
					<u-button color="#EAA402" size="large" :text="$t('复制链接')" @click="copy"></u-button>
				</view>
			</view>
			<view class="list">
				<view class="item title">
					<text>{{$t('用户')}}</text>
					<text>{{$t('注册时间')}}</text>
				</view>
				<view class="item" v-for="(item, index) in list" :key="index">
					<text>{{item.phone.toString() | conceal()}}</text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
		</scroll-view>

		<u-popup :show="show" mode="center" :closeOnClickOverlay="true" @close="close">
			<view class="popupVue" @longtap="saveImageToPhotosAlbum">
				<canvas :style="{ width: cansWidth + 'px', height: cansHeight + 'px'}"
					canvas-id="canvasId"
				></canvas>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import QR from "@/common/qrcode/qrcode.js";
	export default {
		data() {
			return {
				list: [],
				address: '',
				inviteCode: '',
				poster: "../../static/poster.jpg",
				cansWidth: 220, //海报宽度
				cansHeight: 392,
				show: false
			}
		},
		onLoad() {
			this.getShareInfo()
		},
		methods: {
			close(){
				this.show =false
			},
			getShareInfo() {
				this.$http.post('/front/user/shareAddress').then(res => {
					if (res.code == 0) {
						this.list = res.obj.list
						this.address = res.obj.address
						this.inviteCode = res.obj.inviteCode
						console.log(this.address, "address")
					}
				})
			},
			copy() {
				this.$util.copy(this.address)
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			initCanvas() { //绘制海报
				this.show = true
				setTimeout(()=>{
					const QRCODE = QR.createQrCodeImg(this.address, {
						size: parseInt(80) //二维码大小
					})
					console.log(QRCODE,)
					uni.showLoading()
					let that = this;
					var context = uni.createCanvasContext('canvasId')
					setTimeout(function() { //定时器，海报方法不能立即执行，等页面渲染完成
					console.log(that.poster)
						context.drawImage(that.poster, 0, 0, 220, 392) //个人信息背景
						context.drawImage(QRCODE, 55, 144, 110, 110) //二维码图片
						context.save()
						context.beginPath()
						context.arc(44, 350, 25, 0, 2 * Math.PI)
						context.clip()
						context.restore()
						uni.hideLoading()
						context.draw(false, () => {
							console.log("完毕")
							that.$u.toast("长按海报保存到相册")
						})
					}, 200);
				}, 500)
				
			},
			//保存海报
			saveImageToPhotosAlbum(e) { 
				let that = this;
				uni.showLoading();
				let tempRatio = 1.5;
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio,
					height: that.cansHeight * tempRatio,
					destWidth: that.cansWidth * tempRatio * 2,
					destHeight: that.cansHeight * tempRatio * 2,
					canvasId: 'canvasId',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存相册成功',
									icon: "none"
								})
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupVue {
		width: 220px;
		height: 392px;
	}
	.share-wrap {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;

		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}

		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;

			.status {
				width: 100%;
				height: var(--status-bar-height);
			}

			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;

				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}

		.scrollVue {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - 92rpx - var(--window-bottom) - var(--window-top));
			padding-top: 0;

			.uqrcode {
				margin: 0rpx auto;
			}
		}

		.share-png {
			width: 100%;
			vertical-align: middle;
		}

		.share-box {
			position: relative;
			width: 690rpx;
			margin: 50rpx auto;
			box-sizing: border-box;

			.invitation-code {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-34;
				color: #333;

				image {
					width: 34rpx;
					margin-left: 23rpx;
				}
			}

			.btns {
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;

				.u-button {
					width: 272rpx;
					height: 80rpx;
					margin: 0;
					border-radius: 10rpx;
					font-size: $uni-font-size-30;
					background: #5B76FF;
				}
			}
		}

		.list {
			padding: 0 28rpx 0 26rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				font-size: $uni-font-size-30;
				color: #333;
			}

			.title {
				color: #333;
				font-weight: 600;
			}
		}
	}
</style>